<template>
  <div class="gm-skill">
    <loading v-if="!skillColsData || !skillData" />
    <div class="info-text" v-else-if="!skillColsData.length">
      <p>
        <i class="el-icon-document-copy"></i>
      </p>
      <p>
        没有获取到您的
        <span>技术文章</span>数据，请前往导航栏的管理数据-
        <span>技术文章</span>操作版块进行完善。
      </p>
      <p>
        <router-link to="/users/gm_skill">或者点击这里完善资料</router-link>
      </p>
    </div>
    <div v-else class="skill-data-wrapper">
      <div class="navs scroll-bar" v-if="skillComputed && skillComputed.length">
        <el-tree
          :default-expanded-keys="expanded"
          node-key="_id"
          :data="skillComputed"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="main" v-if="thisSkillData.label">
        <div class="label">
          <div class="title">
            <i v-if="thisSkillData.hot" class="el-icon-star-on"></i>
            {{thisSkillData.label}}
          </div>
          <div class="tags" v-if="thisSkillData.tags.length">
            <el-tag size="mini" v-if="tag" v-for="tag in thisSkillData.tags" :key="tag.id">
              <span>{{tag}}</span>
            </el-tag>
          </div>
        </div>
        <div class="body-wrapper scroll-bar">
          <div class="body marked" v-html="markedMethods(thisSkillData.body)"></div>
        </div>
        <div class="time">
          <span>创建时间：{{thisSkillData.created | setDate}}</span>
          <span>更新时间：{{thisSkillData.updated | setDate}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import marked from "marked";
import { mapState, mapActions } from "Vuex";
export default {
  name: "gm-skill",
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      thisSkillData: {}
    };
  },
  mounted() {
    if (this.userName) {
      if (this.skillColData) {
      } else {
        this.getSkillCol(this.userName);
      }

      if (this.skillData) {
      } else {
        this.getSkillData(this.userName);
      }
    }
  },
  watch: {
    userName() {
      if (this.userName) {
        if (this.skillColData) {
        } else {
          this.getSkillCol(this.userName);
        }

        if (this.skillData) {
        } else {
          this.getSkillData(this.userName);
        }
      }
    },
    skillData() {
      if (this.skillData.length) {
        if (!this.thisSkillData._id) {
          if (this.skillComputed[0].children.length) {
            this.handleNodeClick(this.skillComputed[0].children[0]);
          }
        }
      }
    }
  },
  computed: {
    expanded() {
      if (this.skillData.length) {
        if (!this.thisSkillData._id) {
          if (this.skillComputed[0].children.length) {
            return [
              this.skillComputed[0]._id,
              this.skillComputed[0].children[0]._id
            ];
          }
        }
      }
    },
    skillComputed() {
      if (this.userName) {
        if (this.skillColsData && this.skillData.length) {
          if (this.skillColsData.length) {
            let skillColsData = this.skillColsData;
            let skillData = this.skillData;
            let newData = [];
            for (let i = 0; i < skillColsData.length; i++) {
              let obj = {};
              obj = skillColsData[i];
              obj.label = skillColsData[i].name;
              if (skillData.length) {
                obj.children = [];
                for (let j = 0; j < skillData.length; j++) {
                  if (skillColsData[i].name === skillData[j].name) {
                    obj.children.push(skillData[j]);
                  }
                }
              }
              newData.push(obj);
            }
            return newData;
          }
        }
      }
    },
    ...mapState("user", ["skillColsData", "userName", "skillData"])
  },
  methods: {
    markedMethods(data) {
      return marked(data);
    },
    handleNodeClick(data) {
      if (data.skillNumber || data.skillNumber === 0) {
        return;
      }

      this.thisSkillData = data;
    },
    ...mapActions("user", ["getSkillCol", "getSkillData"])
  }
};
</script>


<style lang="sass" scoped>
@import '@/assets/default.sass'
.gm-skill
  width: 100%
  height: 100%
  background-color: #fff
  .info-text
    width: 100%
    height: 100%
    padding: 20%
    @include align(flex-start)
    >p
      flex: 0 0 100%
      width: 100%
      height: 40px
      line-height: 40px
      font-size: 16px
      overflow: hidden
      >a
        color: #0487dc
        &:hover
          color: #2eb037
      >i
        font-size: 24px
      >span
        color: #2eb037
  .skill-data-wrapper
    width: 100%
    height: 100%
    @include flex(flex-start,flex-start)
    .navs
      flex: 0 0 15%      
      height: 100%
      overflow: auto
      .el-tree
        padding: 20px 0
        height: 100%
        color: #444
        background-color: rgba(84, 92, 100,.5)
    .main
      flex: 1
      height: 100%
      padding: 20px
      .label
        width: 100%
        height: 7%
        font-size: 28px
        color: #0487dc
        @include flex(space-between,flex-start)
        .title
          flex: 0 0 50%
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap
        .tags
          flex: 0 0 50%
          text-align: right
          overflow: hidden
          .el-tag
            margin-right: 10px
      .body-wrapper
        width: 100%
        height: 88%
        overflow: auto
        background-color: #fefefe
        padding: 0 20px
      .time
        width: 100%
        height: 5%
        @include flex(space-between,flex-end)
</style>


<style lang="sass">
@import '@/assets/default.sass'
.skill-data-wrapper
  .navs
    .el-tree-node__content
      line-height: 30px
      height: 30px
      width: 100%
      .el-tree-node__label
        font-weight: 700
        @include text-overflow()
    .el-tree-node__children      
      .el-tree-node__label
        font-weight: 200
</style>